//
// Forms
// 
fieldset {
    padding: 0;
    margin: 0;
    border: 0; // Chrome and Firefox set a `min-width: min-content;` on fieldsets,
    min-width: 0;
}

legend {
    display: block;
    width: 100%;
    padding: 0;
    margin-bottom: @line-height-computed;
    font-size: (@font-size-base * 1.5);
    line-height: inherit;
    color: @legend-color;
    border: 0;
    border-bottom: 1px solid @legend-border-color;
}

label {
    display: inline-block;
    max-width: 100%; // Force IE8 to wrap long content (see https://github.com/twbs/bootstrap/issues/13141)
    margin-bottom: 7.5px;
    margin-top: 7.5px;
    font-size: @font-size-base;
    font-weight: bold;
}

.search {
    // margin: 0 25px;
    background: #fff;
    width: 100%;
    height: 35px;
    border-radius: 10px;
    margin-bottom: 15px;
    span {
        float: left;
        margin: 7px 0 0 16px;
        &::before {
            font-size: 22px;
            color: #eeeeee;
        }
    }
    input {
        float: left;
        width: 90%;
        border: 0;
        outline: none;
        text-indent: 15px;
        &:focus {
            outline-offset: -2px;
        }
    }
    input[type="search"] {
        .box-sizing(border-box);
    }
}

// Position radios and checkboxes better
input[type="radio"],
input[type="checkbox"] {
    margin: 4px 0 0;
    margin-top: 1px \9; // IE8-9
    line-height: normal;
}

input[type="file"] {
    display: block;
}

// Make range inputs behave like textual form controls
input[type="range"] {
    display: block;
    width: 100%;
}

// Make multiple select elements height not fixed
select[multiple],
select[size] {
    height: auto;
}

// Focus for file, radio, and checkbox
input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {
    .tab-focus();
}

// Adjust output element
output {
    display: block;
    padding-top: (@padding-base-vertical + 1);
    font-size: @font-size-base;
    line-height: @line-height-base;
    color: @input-color;
}

.form-control {
    display: block;
    width: 100%;
    padding: 6.5px @padding-base-horizontal;
    font-size: @font-size-base;
    line-height: @line-height-base;
    color: @input-color;
    background-color: @input-bg;
    background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
    border: 1px solid @input-border; //border-radius: @input-border-radius; // Note: This has no effect on <select>s in some browsers, due to the limited stylability of <select>s in CSS.
    .box-shadow(inset 0 1px 1px rgba(0, 0, 0, .075));
    .transition(~"border-color ease-in-out .15s, box-shadow ease-in-out .15s"); // Customize the `:focus` state to imitate native WebKit styles.
    .form-control-focus(); // Placeholder
    .placeholder(); // Unstyle the caret on `<select>`s in IE10+.
    &::-ms-expand {
        border: 0;
        background-color: transparent;
    } // Disabled and read-only inputs
    &[disabled],
    &[readonly],
    fieldset[disabled] & {
        background-color: @input-bg-disabled;
        opacity: 1; // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655
    }
    &[disabled],
    fieldset[disabled] & {
        cursor: @cursor-disabled;
    } // Reset height for `textarea`s
    textarea& {
        height: auto;
    }
}

input[type="search"] {
    -webkit-appearance: none;
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"],
    input[type="month"] {
        &.form-control {
            line-height: @input-height-base;
        }
        &.input-sm,
        .input-group-sm & {
            line-height: @input-height-small;
        }
        &.input-lg,
        .input-group-lg & {
            line-height: @input-height-large;
        }
    }
}

.form-group {
    margin-bottom: @form-group-margin-bottom;
}

.radio,
.checkbox {
    position: relative;
    display: block;
    margin-top: 10px;
    margin-bottom: 10px;
    label {
        min-height: @line-height-computed; // Ensure the input doesn't jump when there is no text
        padding-left: 20px;
        margin-bottom: 0;
        font-weight: normal;
        cursor: pointer;
    }
}

.radio input[type="radio"],
.radio-inline input[type="radio"],
.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"] {
    position: absolute;
    margin-left: -20px;
    margin-top: 4px \9;
}

.radio+.radio,
.checkbox+.checkbox {
    margin-top: -5px; // Move up sibling radios or checkboxes for tighter spacing
}

.radio-inline,
.checkbox-inline {
    position: relative;
    display: inline-block;
    padding-left: 20px;
    margin-bottom: 0;
    vertical-align: middle;
    font-weight: normal;
    cursor: pointer;
}

.radio-inline+.radio-inline,
.checkbox-inline+.checkbox-inline {
    margin-top: 0;
    margin-left: 10px; // space out consecutive inline controls
}

input[type="radio"],
input[type="checkbox"] {
    &[disabled],
    &.disabled,
    fieldset[disabled] & {
        cursor: @cursor-disabled;
    }
}

// These classes are used directly on <label>s
.radio-inline,
.checkbox-inline {
    &.disabled,
    fieldset[disabled] & {
        cursor: @cursor-disabled;
    }
}

.radio,
.checkbox {
    &.disabled,
    fieldset[disabled] & {
        label {
            cursor: @cursor-disabled;
        }
    }
}

.form-control-static {
    padding-top: (@padding-base-vertical + 1);
    padding-bottom: (@padding-base-vertical + 1); // Remove default margin from `p`
    margin-bottom: 0;
    min-height: (@line-height-computed + @font-size-base);
    &.input-lg,
    &.input-sm {
        padding-left: 0;
        padding-right: 0;
    }
}

.input-sm {
    .input-size(@input-height-small;
    @padding-small-vertical;
    @padding-small-horizontal;
    @font-size-small;
    @line-height-small;
    @input-border-radius-small);
}

.form-group-sm {
    .form-control {
        height: @input-height-small;
        padding: @padding-small-vertical @padding-small-horizontal;
        font-size: @font-size-small;
        line-height: @line-height-small;
        border-radius: @input-border-radius-small;
    }
    select.form-control {
        height: @input-height-small;
        line-height: @input-height-small;
    }
    textarea.form-control,
    select[multiple].form-control {
        height: auto;
    }
    .form-control-static {
        height: @input-height-small;
        min-height: (@line-height-computed + @font-size-small);
        padding: (@padding-small-vertical + 1) @padding-small-horizontal;
        font-size: @font-size-small;
        line-height: @line-height-small;
    }
}

.input-lg {
    .input-size(@input-height-large;
    @padding-large-vertical;
    @padding-large-horizontal;
    @font-size-large;
    @line-height-large;
    @input-border-radius-large);
}

.form-group-lg {
    .form-control {
        height: @input-height-large;
        padding: @padding-large-vertical @padding-large-horizontal;
        font-size: @font-size-large;
        line-height: @line-height-large;
        border-radius: @input-border-radius-large;
    }
    select.form-control {
        height: @input-height-large;
        line-height: @input-height-large;
    }
    textarea.form-control,
    select[multiple].form-control {
        height: auto;
    }
    .form-control-static {
        height: @input-height-large;
        min-height: (@line-height-computed + @font-size-large);
        padding: (@padding-large-vertical + 1) @padding-large-horizontal;
        font-size: @font-size-large;
        line-height: @line-height-large;
    }
}

.has-feedback {
    position: relative; // Ensure icons don't overlap text
    .form-control {
        padding-right: (@input-height-base * 1.25);
    }
}

.form-control-feedback {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2; // Ensure icon is above input groups
    display: block;
    width: @input-height-base;
    height: @input-height-base;
    line-height: @input-height-base;
    text-align: center;
    pointer-events: none;
}

.input-lg+.form-control-feedback,
.input-group-lg+.form-control-feedback,
.form-group-lg .form-control+.form-control-feedback {
    width: @input-height-large;
    height: @input-height-large;
    line-height: @input-height-large;
}

.input-sm+.form-control-feedback,
.input-group-sm+.form-control-feedback,
.form-group-sm .form-control+.form-control-feedback {
    width: @input-height-small;
    height: @input-height-small;
    line-height: @input-height-small;
}

// Feedback states
.has-success {
    .form-control-validation(@state-success-text;
    @state-success-text;
    @state-success-bg);
}

.has-warning {
    .form-control-validation(@state-warning-text;
    @state-warning-text;
    @state-warning-bg);
}

.has-error {
    .form-control-validation(@state-danger-text;
    @state-danger-text;
    @state-danger-bg);
}

.has-feedback label {
    &~.form-control-feedback {
        top: (@line-height-computed + 5); // Height of the `label` and its margin
    }
    &.sr-only~.form-control-feedback {
        top: 0;
    }
}

.help-block {
    display: block; // account for any element using help-block
    margin-top: 5px;
    margin-bottom: 10px;
    color: lighten(@text-color, 25%); // lighten the text some for contrast
}

.form-inline {
    background: #fff;
    .form-group {
        display: inline-block;
        margin-bottom: 0;
        vertical-align: middle;
    } // In navbar-form, allow folks to *not* use `.form-group`
    .form-control {
        display: inline-block;
        width: 150px; // Prevent labels from stacking above inputs in `.form-group`
        vertical-align: middle;
    } // Make static controls behave like regular ones
    .form-control-static {
        display: inline-block;
    }
    .input-group {
        display: inline-table;
        vertical-align: middle;
        .input-group-addon,
        .input-group-btn,
        .form-control {
            width: auto;
        }
    } // Input groups need that 100% width though
    .input-group>.form-control {
        width: 100%;
    }
    .control-label {
        margin-bottom: 0;
        vertical-align: middle;
    } // Remove default margin on radios/checkboxes that were used for stacking, and
    // then undo the floating of radios and checkboxes to match.
    .radio,
    .checkbox {
        display: inline-block;
        margin-top: 0;
        margin-bottom: 0;
        vertical-align: middle;
        label {
            padding-left: 0;
        }
    }
    .radio input[type="radio"],
    .checkbox input[type="checkbox"] {
        position: relative;
        margin-left: 0;
    } // Re-override the feedback icon.
    .has-feedback .form-control-feedback {
        top: 0;
    } //    }
}

.form-horizontal {
    background: #fff;
    .radio,
    .checkbox,
    .radio-inline,
    .checkbox-inline {
        margin-top: 0;
        margin-bottom: 0;
        padding-top: (@padding-base-vertical + 1); // Default padding plus a border
    }
    .radio,
    .checkbox {
        min-height: (@line-height-computed + (@padding-base-vertical + 1));
    } // Make form groups behave like rows
    .form-group {
        .make-row();
        margin-left: 0;
        margin-right: 0;
        padding: 10px 10px;
    } // Reset spacing and right align labels, but scope to media queries so that
    @media (min-width: @screen-sm-min) {
        .control-label {
            text-align: right;
            margin-bottom: 0;
            padding-top: (@padding-base-vertical + 1); // Default padding plus a border
        }
    } // Validation states
    .has-feedback .form-control-feedback {
        right: floor((@grid-gutter-width / 2));
    } // Form group sizes
    //
    .form-group-lg {
        @media (min-width: @screen-sm-min) {
            .control-label {
                padding-top: (@padding-large-vertical + 1);
                font-size: @font-size-large;
            }
        }
    }
    .form-group-sm {
        @media (min-width: @screen-sm-min) {
            .control-label {
                padding-top: (@padding-small-vertical + 1);
                font-size: @font-size-small;
            }
        }
    }
    .input-sm {
        display: inline-block;
        width: 48%;
        height: 33px;
        border-radius: 0;
    }
}